<template>
  <div class="permission">
    <!-- 卡片 -->
    <el-card>
      <!-- 添加菜单的按钮 -->
      <el-row>
        <el-col style="text-align: right">
          <el-button @click="openAdd(1, '0')" type="primary" size="mini">
            <i class="el-icon-edit"></i>添加菜单
          </el-button>
        </el-col>
      </el-row>
      <!-- 菜单表格 -->
      <el-table :data="perList" row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column label="权限标识" prop="code"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              @click="openAdd(2, row.id)"
              type="text"
              v-if="row.type === 1"
            >
              添加权限点
            </el-button>
            <el-button type="text">查看 api 权限</el-button>
            <el-button @click="openDialog(row.id)" type="text">查看</el-button>
            <el-button @click="del(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑面板 & 新增面板 -->
    <mypanel
      ref="mypanel"
      @updateData="getPermissionAll"
      :showDialog.sync="showDialog"
    ></mypanel>
  </div>
</template>

<script>
import { getPermissionAllApi, delPermissionApi } from '@/api/permission'
export default {
  data () {
    return {
      // 权限列表
      perList: [],
      // 控制面板的显示与隐藏
      showDialog: false
    }
  },
  methods: {
    openAdd (type, pid) {
      // 调用子组件中的方法：setprop 给 type & pid 赋值
      this.$refs.mypanel.setprop(type, pid)
      // 打开面板
      this.showDialog = true
    },
    // 打开编辑面板
    openDialog (id) {
      this.showDialog = true
      // 根据 id 得到权限数据
      this.$refs.mypanel.getObjById(id)
    },
    // 删除权限
    async del (id) {
      try {
        // 询问用户是否删除
        await this.$confirm('是否删除数据', '警告')
        // 提交数据
        await delPermissionApi(id)
        // 提示成功
        this.$message.success('删除成功')
        // 更新数据
        this.getPermissionAll()
      } catch (error) {}
    },
    // 得到所有的权限列表
    async getPermissionAll () {
      const res = await getPermissionAllApi()
      // 保存权限数据
      this.perList = this.trunData(res.data, '0')
    },
    // 将并列数据转为树状结构
    trunData (arr, pid) {
      // 创建返回的完整数组
      const newArr = []
      // 进行遍历寻找数据源（第一次进入找一级，第二次找二级...）
      arr.forEach(item => {
        // 判断是否（一级，二级 ...）
        if (item.pid === pid) {
          // 寻找当前元素下的子元素
          const children = this.trunData(arr, item.id)
          // 判断子元素是否存在
          if (children.length > 0) {
            item.children = children
          }
          // 将满足条件的元素添加新的数组中
          newArr.push(item)
        }
      })
      // 返回结果
      return newArr
    }
  },
  created () {
    this.getPermissionAll()
  },
  components: {
    mypanel: () => import('./components/panel.vue')
  }
}
</script>

<style lang="scss">
.permission {
  margin: 20px;
}
</style>